<template>
  <div>
    <div class="top">
      <p>巡检任务结果</p>
    </div>

    <div class="selects">
      <el-row>
        <el-form ref="form"
                 :model="form"
                 label-width="150px">

          <el-col :span="8">
            <el-form-item label="场景名称：">
              <el-select v-model="form.sceneName"
                         placeholder="全部">
                <el-option label="全部"
                           value="1"></el-option>
                <el-option label="235测试机器狗"
                           value="2"></el-option>
                <el-option label="2号机器人"
                           value="3"></el-option>
                <el-option label="3号机器人"
                           value="4"></el-option>
                <el-option label="4号机器人"
                           value="5"></el-option>
                <el-option label="5号机器人"
                           value="6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务名称：">
              <el-select v-model="form.taskName"
                         placeholder="全部">
                <el-option label="全部"
                           value="01"></el-option>
                <el-option label="SN235"
                           value="02"></el-option>
                <el-option label="0002"
                           value="03"></el-option>
                <el-option label="0003"
                           value="04"></el-option>
                <el-option label="0004"
                           value="05"></el-option>
                <el-option label="0005"
                           value="06"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机器人名称：">
              <el-select v-model="form.robotName"
                         placeholder="全部">
                <el-option label="全部"
                           value="001"></el-option>
                <el-option label="Aliengo"
                           value="002"></el-option>
                <el-option label="0002"
                           value="003"></el-option>
                <el-option label="0003"
                           value="004"></el-option>
                <el-option label="0004"
                           value="005"></el-option>
                <el-option label="0005"
                           value="006"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务状态：">
              <el-select v-model="form.taskStatus"
                         placeholder="全部">
                <el-option label="全部"
                           value="0001"></el-option>
                <el-option label="已完成"
                           value="0002"></el-option>
                <el-option label="终止"
                           value="0003"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="本次执行开始时间：">
              <el-date-picker v-model="time"
                              type="daterange"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  class="buttons">
            <el-button @click="reset()">重置</el-button>
            <el-button type="primary">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <el-row>
      <el-table :data="tableData"
                height="572"
                :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }">
        <el-table-column prop="num"
                         label="序号"
                         align="center">
        </el-table-column>
        <el-table-column prop="sceneName"
                         label="场景名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="sceneCoding"
                         label="场景编号"
                         align="center">
        </el-table-column>
        <el-table-column prop="taskName"
                         label="任务名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="taskCoding"
                         label="任务编号"
                         align="center">
        </el-table-column>
        <el-table-column prop="robotName"
                         label="机器人名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="robotCoding"
                         label="机器人编号"
                         align="center">
        </el-table-column>
        <el-table-column prop="startTime"
                         label="本次执行开始时间"
                         align="center"
                         width='220'>
        </el-table-column>
        <el-table-column prop="endTime"
                         label="本次执行完成时间"
                         align="center"
                         width='220'>
        </el-table-column>
        <el-table-column prop="actualDuration"
                         label="实际时长"
                         align="center"
                         width='220'>
        </el-table-column>
        <el-table-column prop="abnormalAlarm"
                         label="异常报警"
                         align="center">
          <template slot-scope="scope">
            <font v-if="scope.row.abnormalAlarm==='有'"
                  color='red'>有</font>
            <font v-else>无</font>
          </template>
        </el-table-column>
        <el-table-column prop="taskStatus"
                         label="任务状态"
                         align="center">
          <template slot-scope="scope">
            <font v-if="scope.row.taskStatus==='已完成'"
                  color='#00b836'>已完成</font>
            <font v-else
                  color='#F59A23'>终止</font>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="details(scope.row)">查看详情</el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10,20,30,50,100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="100"
                   background
                   align="center">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      time: '',
      form: {
        sceneName: '',
        taskName: '',
        taskStatus: '',
        robotName: ''
      },
      tableData: [
        {
          num: '1',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '1号机器人',
          robotCoding: 'Aliengo',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '无',
          taskStatus: '已完成',
          operation: '详情'
        },
        {
          num: '2',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '1号机器人',
          robotCoding: '0002',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '有',
          taskStatus: '已完成',
          operation: '详情'
        },
        {
          num: '3',
          sceneName: '场景2',
          sceneCoding: 'CJ001',
          taskName: '任务2',
          taskCoding: 'RW001',
          robotName: '235测试机器狗',
          robotCoding: '0003',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '无',
          taskStatus: '已完成',
          operation: '详情'
        },
        {
          num: '4',
          sceneName: '场景3',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '2号机器人',
          robotCoding: '0005',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '有',
          taskStatus: '终止',
          operation: '详情'
        },
        {
          num: '5',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务2',
          taskCoding: 'RW001',
          robotName: '1号机器人',
          robotCoding: 'Aliengo',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '有',
          taskStatus: '已完成',
          operation: '详情'
        },
        {
          num: '6',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '2号机器人',
          robotCoding: 'Aliengo',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '无',
          taskStatus: '终止',
          operation: '详情'
        },
        {
          num: '7',
          sceneName: '场景2',
          sceneCoding: 'CJ001',
          taskName: '任务2',
          taskCoding: 'RW001',
          robotName: '235测试机器狗',
          robotCoding: '0002',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '无',
          taskStatus: '终止',
          operation: '详情'
        },
        {
          num: '8',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务1',
          taskCoding: 'RW001',
          robotName: '2号机器人',
          robotCoding: '0005',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '无',
          taskStatus: '已完成',
          operation: '详情'
        },
        {
          num: '9',
          sceneName: '场景3',
          sceneCoding: 'CJ001',
          taskName: '任务3',
          taskCoding: 'RW001',
          robotName: '3号机器人',
          robotCoding: '0003',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '有',
          taskStatus: '终止',
          operation: '详情'
        },
        {
          num: '10',
          sceneName: '场景1',
          sceneCoding: 'CJ001',
          taskName: '任务3',
          taskCoding: 'RW001',
          robotName: '1号机器人',
          robotCoding: 'Aliengo',
          startTime: '2022-10-25 23:12:56',
          endTime: '2022-10-25 23:12:56',
          actualDuration: '2小时15分03秒',
          abnormalAlarm: '无',
          taskStatus: '终止',
          operation: '详情'
        },
      ]
    }
  },
  methods: {
    reset () {
      this.form.sceneName = '',
        this.form.taskName = '',
        this.form.robotName = '',
        this.form.taskStatus = '',
        this.time = ''
    },
    details (row) {
      console.log(row);
      this.tableData.abnormalAlarm = row.abnormalAlarm
      this.tableData.actualDuration = row.actualDuration
      this.tableData.startTime = row.startTime
      this.tableData.endTime = row.endTime
      this.tableData.robotCoding = row.robotCoding
      this.tableData.robotName = row.robotName
      this.tableData.sceneCoding = row.sceneCoding
      this.tableData.sceneName = row.sceneName
      this.tableData.taskCoding = row.taskCoding
      this.tableData.taskName = row.taskName
      this.tableData.taskStatus = row.taskStatus
      this.$router.push({
        path: '/detailsOfPatrolTaskResults',
        name: "巡检任务结果详情",
        params: {
          abnormalAlarm: this.tableData.abnormalAlarm,
          actualDuration: this.tableData.actualDuration,
          startTime: this.tableData.startTime,
          endTime: this.tableData.endTime,
          robotCoding: this.tableData.robotCoding,
          robotName: this.tableData.robotName,
          sceneCoding: this.tableData.sceneCoding,
          sceneName: this.tableData.sceneName,
          taskCoding: this.tableData.taskCoding,
          taskName: this.tableData.taskName,
          taskStatus: this.tableData.taskStatus,
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  align-items: center;
  border: 2px solid rgba(230, 230, 230, 0.39);
  p {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}

.selects {
  margin: 15px 0;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
  .buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

/deep/ .el-row {
  padding: 0 20px;
}

/deep/ .el-pagination {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%);
}
</style>